<!DOCTYPE html>
<html style="height: 100%">
   <head>
    <meta charset="utf-8" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../dist/echarts.min.js"></script>
    <script src="../theme/dark.js"></script>
   
    <script src="../theme/china.js"></script>
    <title>全国高校2016年各省市计划招生人数</title>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom,"dark");

var name_title = "全国高校2016年各省市计划招生人数"
// 使用中国地图
var mapName = 'china'
//要在地图上展示的数据
var data = [
  {name:"北京",value:35215},
    {name:"天津",value:42196},
    {name:"河北",value:182752},
    {name:"山西",value:152778},
    {name:"内蒙古",value:101587},
    {name:"辽宁",value:103951},
    {name:"吉林",value:84272},
    {name:"黑龙江",value:109318},
    {name:"上海",value:16676},
    {name:"江苏",value:195147},
    {name:"浙江",value:204328},
    {name:"安徽",value:359881},
    {name:"福建",value:107600},
    {name:"江西",value:99041},
    {name:"山东",value:310095},
    {name:"河南",value:307224},
    {name:"湖北",value:205796},
    {name:"湖南",value:174918},
    {name:"重庆",value:105275},
    {name:"四川",value:260928},
    {name:"贵州",value:163191},
    {name:"云南",value:108113},
    {name:"西藏",value:0},
    {name:"陕西",value:150579},
    {name:"甘肃",value:106798},
    {name:"青海",value:19532},
    {name:"宁夏",value:40113},
    {name:"新疆",value:46919},
    {name:"广东",value:345315},
    {name:"广西",value:152496},
    {name:"海南",value:36668}
    ];
    
var geoCoordMap = {};


/*获取地图数据*/
myChart.showLoading();
var mapFeatures = echarts.getMap(mapName).geoJson.features;
myChart.hideLoading();
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
    

});

//convertData函数，组装在地图上展示的数据，包含省份的经纬度坐标和业务数据。
var convertData = function(data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
            });
        }
    }

    return res;
};
option = {
    title: {
        text: name_title,
     
        x: 'center'
    },
    //tooltip，提示框显示内容
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
   
                var toolTiphtml = ''
                for(var i = 0;i<data.length;i++){
                    if(params.name==data[i].name){
                        
                       
                            toolTiphtml+=data[i].name+':'+data[i].value+"<br>"
                        
                    }
                }

                return toolTiphtml;
            
        }
    },
//visualMap，视觉组件
    visualMap: {
        show: true,
        min: 0,
        max: 200,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {
            // color: ['#3B5077', '#031525'] // 蓝黑
            // color: ['#ffc0cb', '#800080'] // 红紫
            // color: ['#3C3B3F', '#605C3C'] // 黑绿
            // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
            // color: ['#23074d', '#cc5333'] // 紫红
            color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#1488CC', '#2B32B2'] // 浅蓝
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿

        }
    },
//geo，地理坐标系组件
    geo: {
        show: true,
        map: mapName,
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false,
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#031525',
                borderColor: '#3B5077',
            },
            emphasis: {
                areaColor: '#2B91B7',
            }
        }
    },
    series: [{//显示地图上各个省份坐标点，坐标点大小与招生人数成比例设置。
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val) {
                return val[2] / 10000+2;//显示大小最小为2
            },
            label: {
                normal: {
                    formatter: '{b}',//数据项的名称，这里是省份名
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9'
                }
            }
        },
        {//地图显示
            type: 'map',
            map: mapName,//显示中国地图
            geoIndex: 0,
            aspectScale: 0.75, //用于 scale 地图的长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            animation: false,//是否开启动画
            data: data
        },
        {//以气泡的形式显示各省招生计划的值
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //气泡
            symbolSize: function(val) {
               //将数据缩小，但保证最小气泡至少为20
                return val[2]/10000 + 20;
            },
            label: {
                normal: {
                    formatter: function(a){return a.value[2];} ,//气泡上显示招生数 a.name是省份名，a.value是数组包含经度，维度，用户数据
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 8,
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#F62157', //标志颜色
                }
            },
            zlevel: 6,
            data:convertData(data),//省份名，经度纬度，用户数据
        },
        {//显示招生前5的省份。
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
             //对数组排序，截取前五个数组对象
            data: convertData(data.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function(val) {
                return val[2] / 10000;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: 'yellow',
                    shadowBlur: 10,
                    shadowColor: 'yellow'
                }
            },
            zlevel: 1
        },

    ]
};
myChart.setOption(option);
       </script>
   </body>
</html>